<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			li {
				border: dashed #999999 1px;
				line-height: 50px;
				padding-left: 10px;
				margin: 5px;
			}

			li:hover {
				background-color: hotpink;
				transition: all 1.5 ease;
			}
			/* li进入是的动画 这两个class属性要一起使用 代表的同一个状态  */
			.v-enter,.v-leave-to {
				transform: translateY(100px);
				transition: all 0.8s ease;
				opacity: 0.5;
			}
			/* 这个好像效果不是很明显 */
			.v-enter-active, .v-leave-active {
				transition: all 0.8s ease;
			}
			/* 使用v-move 要跟v-leave-active 一起使用 否则不会出现效果   */
			.v-move{
				transition: all 1.1s ease;
			}
			.v-leave-active{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="app">


			<div style="margin-left: 25px;">
				<label>
					Id:<input type="text" v-model="id" />
				</label>
				<label>
					Name:<input type="text" v-model="name" />
				</label>
				<label>
					<input type="button" value="添加" @click="add" />
				</label>

			</div>
			<div>

				<!-- <ul> -->
				<!-- appear属性指定整体的入场动画 tag属性解决transition-group默认渲染为span 现在渲染为ul标签 -->
					<transition-group appear tag="ul">
						<li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}}-----{{item.name}}</li>
					</transition-group>
				<!-- </ul> -->

			</div>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					list: [{
							id: 1,
							name: '杜兰特'
						},
						{
							id: 2,
							name: '科比'
						},
						{
							id: 3,
							name: '维斯布鲁克'
						},
						{
							id: 4,
							name: '小乔丹'
						}

					],
					id: '',
					name: ''
				},
				methods: {
					add() {
						this.list.push({
							id: this.id,
							name: this.name
						})
						this.name = ""
						this.id = ''
					},
					del(i){
						this.list.splice(i,1)
					}
				}
			})
		</script>
	</body>
</html>
